import React from "react";
import styled from 'styled-components';
import CommonCard from "@/components/CommonCard/CommonCard";
import ContentCard from "@/components/ContentCard/ContentCard";
import { DatePicker, Form, Progress, Select } from "@arco-design/web-react";
import dataFetchJson from '@/configs/dataFetch.json';

const Wrapper = styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgb(54, 54, 54);
    padding: 16px;
`;

const FlexRow = styled.div`
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: row;

    #special .arco-form-item {
        margin-bottom: 6px;
    }
`;

const StyledCommand = styled.div`
    color: rgb(54, 54, 54);
    font-size: 16px;
    margin-bottom: 6px;
`;

const DataCather = () => {

    return (
        <Wrapper>
            <CommonCard
                title="历史数据"
            >
                <ContentCard
                    style={{ width: '100%' }}
                    title="数据获取"
                    tooltip={{
                        show: true,
                        content: "获取历史数据的相关信息。",
                    }}
                >
                    <FlexRow style={{ width: '30%', marginRight: '12px' }}>
                        <ContentCard
                            style={{ width: '100%' }}
                            title="基础信息配置"
                            tooltip={{ show: false }}
                        >
                            <Form style={{ height: '100%' }}>
                                <Form.Item label="数据类型">
                                    <Select
                                        placeholder='请选择数据类型'
                                        style={{ width: '94%' }}
                                    >
                                        {
                                            dataFetchJson.dataType.map((type) => {
                                                return (
                                                    <Select.Option value={type}>{type}</Select.Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item label="数据地点">
                                    <Select
                                        placeholder='请选择数据所属地'
                                        style={{ width: '94%' }}
                                    >
                                        <Select.Option value='nanjing'>江苏南京</Select.Option>
                                        <Select.Option value='yancheng'>江苏盐城</Select.Option>
                                        <Select.Option value='kunshan'>江苏昆山</Select.Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item label="开始时间">
                                    <DatePicker
                                        style={{ width: '94%' }}
                                        placeholder="请选择开始时间"
                                        showTime={{
                                            defaultValue: '04:05:06',
                                        }}
                                        format='YYYY-MM-DD HH:mm:ss'
                                    />
                                </Form.Item>
                                <Form.Item label="结束时间">
                                    <DatePicker
                                        style={{ width: '94%' }}
                                        placeholder="请选择结束时间"
                                        showTime={{
                                            defaultValue: '04:05:06',
                                        }}
                                        format='YYYY-MM-DD HH:mm:ss'
                                    />
                                </Form.Item>
                            </Form>
                        </ContentCard>
                    </FlexRow>
                    <FlexRow style={{ width: '70%'}}>
                    <ContentCard
                            style={{ width: '100%' }}
                            title="获取进度"
                            tooltip={{ show: false }}
                        >
                            <Form id="special" style={{ height: '100%' }} labelCol={{ span: 3 }} wrapperCol={{ span: 20 }}>
                                {
                                    dataFetchJson.downloadList.map((row, index) => {
                                        return (
                                            <Form.Item key={`formItem-row-${index}`} label={row.label}>
                                                <Progress percent={row.progress} size='large' />
                                            </Form.Item>
                                        )
                                    })
                                }
                            </Form>
                        </ContentCard>
                    </FlexRow>
                </ContentCard>
                <ContentCard
                    style={{ width: '100%' }}
                    title="命令日志"
                    tooltip={{ show: false }}
                >
                    <div id="systemCode" style={{ width: '100%', height: '300px', background: 'rgba(24, 24, 24, 0.8)', padding: '10px', overflow: 'auto' }}>
                        {
                            dataFetchJson.command.map((command, index) => {
                                return (
                                    <StyledCommand key={`command-row-${index}`}>{command}</StyledCommand>
                                )
                            })
                        }
                    </div>
                </ContentCard>
            </CommonCard>
        </Wrapper>
    )
}


export default DataCather;